<template>
  <div class="register">
    <form class="form create" method="post">
     <p> <input type="text" v-model="loginForm.name" placeholder="用户名"/></p>
     <p> <input type="password" v-model="loginForm.pass" placeholder="密码"/></p>
      <p> <input type="password" v-model="loginForm.re_pass" placeholder="确认密码"/></p>
      <div>
				<label>上传头像：</label>
				<input type="file" name="avator" id="avator" @change="addImg" ref="inputer" title="123" >
				<input type="hidden" id="avatorVal" >
				<img class="preview" alt="预览头像" id="previewPic" style="display:inline">
			</div>
      <button @click="_register">注册</button>
      </form>
  </div>
</template>
<script>
import { register } from '../api/register'
export default {
  name:'register',
  data() {
    return {
      loginForm:{
        name:'',
        pass:'',
        re_pass: '',
        avator:''
      }
    }
  },
  methods:{
    addImg(event) {
      var avator = document.getElementById('avator'),
          avatorVal =document.getElementById('avatorVal'),
          previewPic = document.getElementById('previewPic');

      let _files = event.target.files;
      if(_files.length != 0) {
        var file = _files[0],
        reader = new FileReader();
        if(!reader){
          avator.value = '';
          return;
        }
        console.log(file.size,file.type)

        if(!/image/g.test(file.type)) {// //判断获取的是否为图片文件
          alert('请上传头像')
          avator.value ='';
          previewPic.setAttribute('value','');

          return
        }
        reader.onload = function (e) {
          avator.value ='';
          previewPic.setAttribute('src',e.target.result);
          var image = new Image();
          image.onload = function () {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext("2d");
            canvas.width= 100;
            canvas.height = 100;
            ctx.clearRect(0,0,100,100);
            ctx.drawImage(image,0,0,100,100);
            var blob = canvas.toDataURL("image/png");
            avatorVal.setAttribute('value',blob);
          }
          image.src = e.target.result;
          
        };
        //readAsDataURL读取文件并将文件数据以URL形式保存到result属性中
        reader.readAsDataURL(file);
      }
       
    },
    _register() {
      if(this.loginForm.name ==='') {
         this.$message.warning('用户名不能为空哦~~')
         return
      }
      if(this.loginForm.pass === ''){
        this.$message.warning('用户名不能为空哦~~')
        return
      }
      if(this.loginForm.re_pass != this.loginForm.pass){
        this.$message.warning('两次密码不一样')
        return
      }


      var avatorVal =document.getElementById('avatorVal');
      this.loginForm.avator = avatorVal.getAttribute('value');

      register(this.loginForm)     
      .then(res => {//res.status == 200
       
        if(res.data.code === 200) {
         this.$message.success('注册成功')
         window.location.href = "/login"	  

        }else{
          this.$message.error(res.data.message)
        }
      })
      .catch(err => {
        console.log(err);
        
        //alert(err)
      })
    }
  }
}
</script>
<style scoped>
.form{
  width: 60%;
}
.form img.preview {
    width:100px;
    height:100px;
    border-radius: 50%;
    display: none;
    margin-top:10px;
}
input {
    display: block;
    width: 100%;
    height: 35px;
    font-size: 18px;
    padding: 6px 7px;	
	border-radius: 4px;   
	border: 1px solid #d7dde4;
	-webkit-appearance: none;
}
input[type="file"] {
color: transparent;
}
</style>